<template>
  <div>
    <van-search v-model="value" placeholder="请输入搜索关键词" />
  </div>
  <div class="lbt">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item>
    <img src="../../img/1.jpg" alt="">
  </van-swipe-item>
  <van-swipe-item>
    <img src="../../img/2.jpg" alt="">
  </van-swipe-item>
  <van-swipe-item>
    <img src="../../img/3.jpg" alt="">
  </van-swipe-item>
  <van-swipe-item>
    <img src="../../img/4.jpg" alt="">
  </van-swipe-item>
</van-swipe>
<van-card v-for="item in data" :desc="item.name" :title="item.title" :thumb="item.url" :key="item.id" @click="toshop(item)" />
  </div>
  <div class="xr">
    <dl v-for="item in xr">
      <dt>
        <img :src="item.src" alt="">
      </dt>
      <dd>
        <p>{{item.t1}}</p>
        <p class="ys1">{{ item.t2 }}</p>
        <p class="ys2">￥{{ item.t3 }} </p>
      </dd>
    </dl>
  </div>
  
</template>

<script setup>
let xr = [
  {src:'/src/img/1.png',t1:'医用外科一次性防护口罩',t2:'84.00',t3:'75.00'},
  {src:'/src/img/2.png',t1:'阿姣OTC单盒装用于血...',t2:'10.00',t3:'120.00'},
  {src:'/src/img/1.png',t1:'医用外科一次性防护口罩',t2:'12.00',t3:'35.00'},
  {src:'/src/img/2.png',t1:'阿姣OTC单盒装用于血...',t2:'32.00',t3:'26.00'},
  {src:'/src/img/1.png',t1:'医用外科一次性防护口罩',t2:'88.00',t3:'15.00'},
  {src:'/src/img/2.png',t1:'阿姣OTC单盒装用于血...',t2:'66.00',t3:'32.00'},
  {src:'/src/img/1.png',t1:'医用外科一次性防护口罩',t2:'84.00',t3:'85.00'},
  {src:'/src/img/2.png',t1:'阿姣OTC单盒装用于血...',t2:'9.00',t3:'45.00'},
  {src:'/src/img/1.png',t1:'医用外科一次性防护口罩',t2:'58.00',t3:'62.00'},
  {src:'/src/img/2.png',t1:'阿姣OTC单盒装用于血...',t2:'6.00',t3:'66.00'},
  {src:'/src/img/1.png',t1:'医用外科一次性防护口罩',t2:'50.00',t3:'52.00'},
  {src:'/src/img/2.png',t1:'阿姣OTC单盒装用于血...',t2:'36.00',t3:'25.00'},
  {src:'/src/img/1.png',t1:'医用外科一次性防护口罩',t2:'84.00',t3:'322.00'},
  {src:'/src/img/2.png',t1:'医用外科一次性防护口罩',t2:'84.00',t3:'75.00'},
]
import axios from 'axios';
import { ref } from 'vue';
// 跳转
import { useRouter } from 'vue-router';
let router = new useRouter()

const data = ref([])
const getData = async()=>{
    const resp = await axios.get('/api/room/list')
    console.log(resp.data.data.list)
    data.value = resp.data.data.list
}
const toshop = (v)=>{
    router.push({
        path:'/shop/'+v.id,
        query:v
    })
}
getData()
</script>

<style>
.van-card{
  width: 100%;
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
    /* background-color: #39a9ed; */
}
.my-swipe img{
  width: 100%;
  height: 200px;
}
dl{
  width: 180px;
  height: 250px;
  float: left;
}
.ys1{
  color: #ccc;
}
.ys2{
  color: red;
}
</style>